import React from 'react';
import { CloudServerOutlined } from '@ant-design/icons';
import useStore from '../store';

const Logo = ({ collapsed }) => {
  const theme = useStore((state) => state.theme);
  
  const containerStyle = {
    height: 64,
    display: 'flex',
    alignItems: 'center',
    justifyContent: collapsed ? 'center' : 'flex-start',
    padding: collapsed ? '0' : '0 24px',
    cursor: 'pointer',
    transition: 'all 0.3s',
    overflow: 'hidden',
    background: theme === 'dark' ? 'transparent' : 'transparent',
  };

  const iconStyle = {
    fontSize: 24,
    color: theme === 'dark' ? '#1890ff' : '#1890ff',
    transition: 'all 0.3s',
  };

  const titleStyle = {
    color: theme === 'dark' ? '#fff' : '#000',
    fontSize: 18,
    fontWeight: 600,
    marginLeft: 12,
    transition: 'all 0.3s',
    whiteSpace: 'nowrap',
    opacity: collapsed ? 0 : 1,
  };

  const subTitleStyle = {
    color: theme === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)',
    fontSize: 12,
    marginLeft: 12,
    transition: 'all 0.3s',
    whiteSpace: 'nowrap',
    opacity: collapsed ? 0 : 1,
  };

  return (
    <div style={containerStyle}>
      <CloudServerOutlined style={iconStyle} />
      {!collapsed && (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={titleStyle}>React Admin</span>
          <span style={subTitleStyle}>企业级中后台</span>
        </div>
      )}
    </div>
  );
};

export default Logo;